<template>
    <div class="itemMusicList">
        <div class="listTop">
            <div class="listLeft" >
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang"></use>
                </svg>
                <h5>播放全部</h5>
                <span>(共{{songs.length}}首)</span>
            </div>
            <div class="listRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{playList.subscribedCount}})</span>
            </div>
        </div>
        <div class="itemsList">
            <div class="itemList" v-for="(item,index) in songs" :key="item.index">
                <div class="itemListLeft" @click="playMusic(index,item.id)">
                <span class="songId">{{index+1}}</span>
                <div>
                    <p>{{item.name}}</p>
                    <span v-for="item1 in item.ar">{{item1.name}}</span>
                </div>
            </div>
            <div class="itemListRight">
                <span class="bofang" v-if="item.mv!=0">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                </span>
                <span class="libiao">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </span>
            </div>
        </div>
            </div>
            
    </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    setup (props) {
        console.log(props);
    },
    props:['songs','playList'],
    methods:{
        playMusic:function(index,id){
            this.updateplayList(this.songs),
            this.updateplayListIndex(index),
            this.updateplayId(id)
        },
        ...mapMutations(["updateplayList","updateplayListIndex","updateplayId"])
    },
    
}
</script>

<style lang="less" scoped>
.itemMusicList{
    background-color: #ffffff;
    height: 300px;
    border-radius: 10px;
    .listTop{
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    .listLeft{
        display: flex;
        flex-direction: row;
        width: 50%;
        height: 30px;
        margin-left: 10px;
        align-items: center;
        .icon{
            width: 25px;
            height: 25px;
            margin-right: 10px;
        }
        span{
            font-size: 12px;
            color: #ababad;
        }
    }
    .listRight{
        background-color: #ff1900;
        border-radius: 30px;
        color: #ffffff;
        margin-right: 10px;
        // height: 40px;
        padding: 10px;  
        .icon{
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }
        span{
            font-size: 14px;
            color: #ffffff;
            // margin-right: 10px;
        }
    }  
}
.itemList{
        width: 100%;
        height: 60px;
        // border: 1px solid black;
        display: flex;
        justify-content: space-between;
        .itemListLeft{
            display: flex;
            .songId{
            color: #ababad;
            font-size: 14px;
            width: 30px;
            text-align: center;
            line-height: 50px;
        }
        div{
            padding: 5px 0;
            p{
                font-size: 14px;
                font-weight: bold;
                width:200px;
                overflow: hidden; 
                white-space: nowrap; 
                text-overflow: ellipsis;
            }
            span{
                font-size: 12px;
                color: #ababad;
            }
        }
 
        }
        .itemListRight{
            .bofang{
            width: 25px;
            height: 25px;
            line-height: 50px;
            margin-right: 35px;
            .icon{
                width: 25px;
                height: 25px;
                color: #ababad;
            }
        }
        .libiao{
            width: 25px;
            height: 25px;
            line-height: 50px;
            margin-right: 10px;
            .icon{
                width: 25px;
                height: 25px;
                color: #ababad;
            }
        }
        }
        
    }
}
</style>